<template>
  <div class="device-edit-container">
    <el-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      label-width="120px"
      class="device-form"
    >
      <!-- 设备基本信息 -->
      <el-card class="form-section">
        <template #header>
          <div class="section-title">设备基本信息</div>
        </template>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="设备类型" prop="typeId">
              <el-select
                v-model="formData.typeId"
                placeholder="请选择设备类型"
                @change="handleTypeChange"
              >
                <el-option
                  v-for="item in deviceTypes"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="品牌" prop="brand">
              
              <el-select
                v-model="formData.brand"
                filterable 
    clearable
      default-first-option

                placeholder="请选择品牌"
                
                @change="handleBrandChange"
              >
                <el-option
                  v-for="(item, index) in brands"
                  :key="index"
                  :label="item.brand"
                  :value="item.brand"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="型号" prop="model">
              <el-select
                v-model="formData.model"
                placeholder="请选择型号"
                :disabled="models.length < 1"
              >
                <el-option
                  v-for="(item, index) in models"
                  :key="index"
                  :label="item.model"
                  :value="item.model"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 设备参数 -->
      <el-card class="form-section">
        <template #header>
          <div class="section-title">设备参数</div>
        </template>

        <el-row :gutter="20">
          <!-- 新增价格字段 -->
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="价格" prop="price">
              <el-input
                v-model.number="formData.price"
                placeholder="请输入价格"
                type="number"
              >
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 新增底盘桥数字段 -->
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="底盘桥数" prop="chassisAxle">
              <el-input
                v-model="formData.chassisAxle"
                placeholder="请输入桥数"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="设备生产年份" prop="year">
              <el-date-picker
                v-model="formData.year"
                type="year"
                placeholder="选择年份"
                value-format="YYYY"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="小时数" prop="hour">
              <el-input
                v-model.number="formData.hour"
                placeholder="请输入小时数"
              >
                <template #append>小时</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="垂直高度" prop="verticalHeight">
              <el-input
                v-model.number="formData.verticalHeight"
                placeholder="请输入垂直高度"
              >
                <template #append>米</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="支腿形式" prop="outriggerType">
              <el-select
                v-model="formData.outriggerType"
                placeholder="请选择支腿形式"
              >
                <el-option
                  v-for="(item, index) in outriggerTypes"
                  :key="index"
                  :label="item.outriggerType"
                  :value="item.outriggerType"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="排放标准" prop="emissionStandard">
              <el-select
                v-model="formData.emissionStandard"
                placeholder="请选择排放标准"
              >
                <el-option
                  v-for="(item, index) in emissionStandards"
                  :key="index"
                  :label="item.emissionStandard"
                  :value="item.emissionStandard"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="16">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.description"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 图片和视频上传 -->
      <el-card class="form-section">
        <template #header>
          <div class="section-title">图片和视频</div>
        </template>

        <div class="upload-section">
          <div class="upload-title">
            设备图片 <span class="required">*</span>
            <span class="tip">(至少一张)</span>
          </div>

          <el-upload
            action="http://localhost:9520/serviceoss/fileoss/uploadAvatarToOss"
            name="file"
            list-type="picture-card"
            :file-list="imageList"
            :on-preview="handlePicturePreview"
            :on-remove="handleRemove"
            :on-change="handleImageChange"
            :before-upload="beforeImageUpload"
            :on-success="handleSuccess"
            :auto-upload="true"
            :limit="25"
            multiple
            accept="image/*"
            class="rectangle-upload"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <!-- 添加图片验证提示 -->
          <div v-if="showImageError" class="image-error-tip">
            <span style="color: #f56c6c; font-size: 12px"
              >请至少上传一张设备图片</span
            >
          </div>

          <el-dialog v-model="dialogVisible" title="">
            <el-image
              style="width: 680px; height: 573px"
              w-full
              :src="dialogImageUrl"
              alt="Preview Image"
            />
          </el-dialog>
        </div>

        <div class="upload-section">
          <div class="upload-title">
            设备视频 <span class="tip">(可选，支持MP4格式，最大100MB)</span>
          </div>

          <!-- 修改视频上传组件 -->
          <el-upload
            action="http://localhost:9520/servicevod/vod/uploadAlyiVideo"
            name="file"
            :file-list="videoList"
            :on-preview="handleVideoPreview"
            :on-remove="handleVideoRemove"
            :on-change="handleVideoChange"
            :before-upload="beforeVideoUpload"
            :on-success="handleVideoSuccess"
            :auto-upload="true"
            :limit="1"
            accept="video/mp4,video/avi,video/mov"
            list-type="text"
            :show-file-list="false"
          >
            <el-button type="primary">
              <el-icon><VideoCamera /></el-icon>
              上传视频
            </el-button>
          </el-upload>

          <!-- 视频预览区域 -->
          <div v-if="videoList.length > 0" class="video-preview-container">
            <div class="video-item" v-for="file in videoList" :key="file.uid">
              <div class="video-thumbnail" @click="handleVideoPlay(file)">
                <!-- 使用封面图片显示 -->
                <el-image
                  v-if="MyfirstImageUrl"
                  :src="MyfirstImageUrl"
                  class="video-cover-image"
                  alt="视频封面"
                />
                <video :src="file.url" class="video-preview"></video>
                <div class="video-play-overlay">
                  <el-icon size="40"><VideoPlay /></el-icon>
                </div>
              </div>
              <div class="video-info">
                <div class="video-name">{{ file.name }}</div>
                <div class="video-actions">
                  <el-button type="primary" link @click="handleVideoPlay(file)"
                    >播放</el-button
                  >
                  <el-button type="danger" link @click="handleVideoRemove(file)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 视频播放对话框 -->
      <el-dialog
        v-model="videoDialogVisible"
        title=""
        width="60%"
        :close-on-click-modal="false"
      >
        <video
          :src="currentVideoUrl"
          controls
          autoplay
          style="width: 100%; max-height: 500px"
        >
          您的浏览器不支持视频播放
        </video>
        <template #footer>
          <el-button @click="videoDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>

      <!-- 联系人信息 -->
      <el-card class="form-section">
        <template #header>
          <div class="section-title">联系人信息</div>
        </template>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="联系人" prop="userName">
              <el-input
                v-model="formData.userName"
                placeholder="请输入联系人姓名"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="16">
            <el-form-item label="设备所在地" prop="location">
              <el-cascader
                v-model="formData.location"
                :options="locationOptions"
                :props="locationProps"
                placeholder="请选择省/市/区"
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 操作按钮 -->
      <div class="action-buttons">
    
        <el-button type="success" @click="handleSubmit" size="large"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import httpInstance from "axios";
import { useRoute, useRouter } from "vue-router";
import { regionData, codeToText } from "element-china-area-data";
import { Plus, VideoPlay, VideoCamera } from "@element-plus/icons-vue";
import { useCounterStore } from '@/stores/counter';

const route = useRoute();
const router = useRouter();

// 表单引用
const formRef = ref();
//表单数据
const formData = reactive({});
const formData2 = reactive({});
// 表单验证规则
const rules = reactive({
  // 设备基本信息
  typeId: [{ required: true, message: "请选择设备类型", trigger: "change" }],
  brand: [{ required: true, message: "请输入品牌", trigger: "change" }],
  model: [{ required: true, message: "请输入型号", trigger: "change" }],

  // 设备参数
  price: [
    { required: true, message: "请输入价格", trigger: "blur" },
    { type: "number", min: 0, message: "价格不能为负数", trigger: "blur" },
    {
      type: "number",
      max: 99999999,
      message: "价格不能超过99999999",
      trigger: "blur",
    },
  ],
  chassisAxle: [
    { required: true, message: "请输入底盘桥数", trigger: "blur" },
    { pattern: /^[0-9]*$/, message: "桥数必须为数字", trigger: "blur" },
  ],
  year: [
    { required: true, message: "请选择设备生产年份", trigger: "change" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请选择设备生产年份"));
        } else {
          const currentYear = new Date().getFullYear();
          const selectedYear = parseInt(value);
          if (selectedYear < 1900 || selectedYear > currentYear + 1) {
            callback(new Error(`年份应在1900-${currentYear + 1}之间`));
          } else {
            callback();
          }
        }
      },
      trigger: "change",
    },
  ],
  hour: [
    { required: true, message: "请输入小时数", trigger: "blur" },
    { type: "number", min: 0, message: "小时数不能为负数", trigger: "blur" },
    {
      type: "number",
      max: 99999,
      message: "小时数不能超过99999",
      trigger: "blur",
    },
  ],
  verticalHeight: [
    { required: true, message: "请输入垂直高度", trigger: "blur" },
    { type: "number", min: 0, message: "垂直高度不能为负数", trigger: "blur" },
    {
      type: "number",
      max: 1000,
      message: "垂直高度不能超过1000米",
      trigger: "blur",
    },
  ],
  outriggerType: [
    { required: true, message: "请选择支腿形式", trigger: "change" },
  ],
  emissionStandard: [
    { required: true, message: "请选择排放标准", trigger: "change" },
  ],

  // 联系人信息
  userName: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
    { min: 2, max: 20, message: "姓名长度在2-20个字符之间", trigger: "blur" },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
      message: "姓名只能包含中文或英文字母",
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码格式",
      trigger: "blur",
    },
  ],
  location: [
    {
      required: true,
      message: "请选择设备所在地",
      trigger: "change",
      type: "array",
      min: 3,
      message: "请选择完整的省市区",
    },
  ],
});

// 图片上传验证
const validateImages = (rule, value, callback) => {
  if (imageList.value.length === 0) {
    callback(new Error("请至少上传一张设备图片"));
  } else {
    callback();
  }
};

// 在data中添加图片验证规则
rules.images = [{ validator: validateImages, trigger: "change" }];

//设备类型数组
const deviceTypes = ref([]);
//设备品牌数组
const brands = ref([]);
//设备型号数组
const models = ref([]);
//设备支腿形式数组
const outriggerTypes = ref([]);
//设备排放标准数组
const emissionStandards = ref([]);

//查询所有设备分类
const selectAllEquipmentTypeByPC = async () => {
  let res = await httpInstance.get(
    "/advertisement/selectAllEquipmentTypeByPC"
  );
  deviceTypes.value = res.data.data.list;
};
//点击设备类型去查询下面的品牌名称
const handleTypeChange = async (value) => {
  // 清空品牌和型号
  formData.brand = "";
  formData.model = "";
  models.value = [];
  //根据设备类型id查询下面的品牌名称
  console.log("value", value);
  let res = await httpInstance.get(
    `/advertisement/selectEquipmentInfoByTypeId/${value}`
  );

  brands.value = res.data.data.list;

  // 自动选择第一个品牌
  if (brands.value.length > 0) {
    await nextTick(); // 等待DOM更新
    formData.brand = brands.value[0].brand;

    // 自动触发品牌变化，加载型号
    await handleBrandChange(formData.brand);
  }
};
//点击设备品牌去查询下面的品牌型号
const handleBrandChange = async (value) => {
  // 清空型号
  formData.model = "";

  //根据设备品牌查询下面的型号
  let res = await httpInstance.get(
    `/advertisement/selectEquipmentInfoByBrandName/${value}`
  );
      console.log('所有设备',res);

  models.value = res.data.data.list;

  // 自动选择第一个型号
  if (models.value.length > 0) {
    await nextTick(); // 等待DOM更新
    formData.model = models.value[0].model;
  }
};
//查询所有的支腿形式
const selectAllEquipmentoutriggerType = async () => {
  let res = await httpInstance.get(
    "/advertisement/selectAllEquipmentoutriggerType"
  );
  outriggerTypes.value = res.data.data.list;
};
//查询所有的排放标准
const selectAllEquipmentemissionStandard = async () => {
  let res = await httpInstance.get(
    "/advertisement/selectAllEquipmentemissionStandard"
  );
  emissionStandards.value = res.data.data.list;
};

// 图片上传相关
const imageList = ref([]);
//预览的对话框
const dialogVisible = ref(false);
//预览设备图片
const dialogImageUrl = ref("");

//图片预览处理
const handlePicturePreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};
//图片移除处理
const handleRemove = (file, fileList) => {
  console.log('移除',file, fileList);
  imageList.value = fileList;
};
//图片的校验
const beforeImageUpload = (file) => {
  const isJPGOrPNG = file.type === "image/jpeg" || file.type === "image/png";
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isJPGOrPNG) {
    ElMessage.error("上传图片只能是 JPG/PNG 格式!");
  }
  if (!isLt5M) {
    ElMessage.error("上传图片大小不能超过 5MB!");
  }
  return isJPGOrPNG && isLt5M;
};
// 图片上传的处理
const handleImageChange = (file, fileList) => {
  console.log('上传',file, fileList);
  imageList.value = fileList.map((item) => {
    // 优先使用后端返回的URL，如果没有则使用临时URL
    const finalUrl = item.response?.data?.url || item.url;

    return {
      uid: item.uid,
      url: finalUrl,
    };
  });
};
// 上传设备图片成功回调
const handleSuccess = (response, uploadFile, uploadFiles) => {
  ElMessage.success("上传成功");
};

// 视频上传相关
const videoList = ref([]);
//预览视频的对话框
const videoDialogVisible = ref(false);
//当前上传成功后的视频路径
const currentVideoUrl = ref("");
//设备图片集合第一个
const MyfirstImageUrl = ref("");
// 视频上传成功回调
const handleVideoSuccess = async (response, uploadFile, uploadFiles) => {
  ElMessage.success("视频上传成功");
  currentVideoUrl.value = response.data.videoUrl;
  // 获取图片集合第一张图片作为封面
  const firstImageUrl =
    imageList.value.length > 0 ? imageList.value[0].url : null;
  MyfirstImageUrl.value = firstImageUrl;
};

// 视频预览/播放
const handleVideoPlay = (file) => {
  videoDialogVisible.value = true;
};

// 视频移除处理
const handleVideoRemove = (file) => {
  ElMessageBox.confirm("确定要删除这个视频吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const index = videoList.value.findIndex((item) => item.uid === file.uid);
      if (index > -1) {
        videoList.value.splice(index, 1);
      }
      ElMessage.success("视频删除成功");
    })
    .catch(() => {
      // 用户取消删除
    });
};

// 视频上传前的校验
const beforeVideoUpload = (file) => {
  const isVideo = file.type.includes("video");
  const isLt100M = file.size / 1024 / 1024 < 100;
  const allowedFormats = ["video/mp4", "video/avi", "video/quicktime"]; // MP4, AVI, MOV

  if (!isVideo) {
    ElMessage.error("上传文件只能是视频格式!");
    return false;
  }

  if (!allowedFormats.includes(file.type)) {
    ElMessage.error("视频格式只能是 MP4、AVI、MOV!");
    return false;
  }

  if (!isLt100M) {
    ElMessage.error("上传视频大小不能超过 100MB!");
    return false;
  }

  return true;
};

// 视频变化处理
const handleVideoChange = (file, fileList) => {
  videoList.value = fileList;
};

// 视频预览处理（保留原有的，用于列表中的预览）
const handleVideoPreview = (file) => {
  handleVideoPlay(file);
};

// 地区选择数据
const locationOptions = ref(regionData);

const locationProps = {
  expandTrigger: "hover",
  value: "value", // 添加value映射
  label: "label", // 添加label映射
  children: "children", // 添加children映射
};

// 工具函数：将地址数组转换为字符串
const locationArrayToString = (locationArray) => {
  if (Array.isArray(locationArray) && locationArray.length === 3) {
    // 使用codeToText将code转换为文本
    return locationArray.map((code) => codeToText[code]).join("/");
  }
  return locationArray || "";
};


// 图片验证状态
const showImageError = ref(false);

// 提交处理
const handleSubmit = async () => {
  
  
  // 先验证图片
  if (imageList.value.length === 0) {
    showImageError.value = true;
    ElMessage.error("请至少上传一张设备图片");
    return;
  } else {
    showImageError.value = false;
  }

  // // 然后验证表单
  formRef.value.validate(async (valid) => {
    if (valid) {
       //解析
      formData.location = locationArrayToString(formData.location);
      formData.contactName = formData.userName;
      formData.contactPhone = formData.phone;

      //封装视频对象
      const videodx ={
        name:'',
        size:'',
        url:'',
      }

   for (let i = 0; i < videoList.value.length; i++) {
      const video = videoList.value[0];
       videodx.name= video.name
       videodx.size= video.size
       videodx.url= currentVideoUrl.value
        
    }
  
        let equipmentEditDtoPC = {
          equipment: JSON.parse(JSON.stringify(formData)), 
          equiImageDtoList: imageList.value,
          equilVideoDto2: videodx,

        };
      let res=await httpInstance.post("/advertisement/saveEquipmentInfoPC",
        equipmentEditDtoPC);
      if (res.data.data.success == true) {
        formRef.value.resetFields();
         imageList.value = [];
         videoList.value = [];

         //弹窗完毕后刷新
         ElMessage.success("设备发布成功");
         //等待两秒
         await new Promise((resolve) => setTimeout(resolve, 2000));
      }
    }
   })
};


//根据store的用户令牌去获取用户信息
const getLoginUserInfoByToken = async () => {
    //判断令牌是否为空
    if (useCounterStore().token == "") {
      //跳转到登录页面
      router.push("/login");
    }
    else{
      //判断是否为卖家
      const res=await httpInstance.get(`advertisement/user/${useCounterStore().userId}`)
      if(res.data.data.user.userType==0)
      {
        //跳转到申请为卖家页面
        ElMessage.warning("请先申请为商户")
        router.push("/My/MyShangHu");
      }
     else{
    console.log('卖家id',useCounterStore().userId);
    formData.userId= useCounterStore().userId;
      }
    }
 
};

//初始化数据
onMounted(() => {
  selectAllEquipmentTypeByPC();
  selectAllEquipmentoutriggerType();
  selectAllEquipmentemissionStandard();
  getLoginUserInfoByToken();
});


</script>

<style scoped>
.device-edit-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.device-form {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-section {
  margin-bottom: 24px;
  border: 1px solid #e6ebf5;
  border-radius: 8px;
  overflow: hidden;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  background: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

.required {
  color: #f56c6c;
  margin-right: 4px;
}

.tip {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
  margin-left: 8px;
}

.upload-section {
  margin-bottom: 20px;
}

.upload-section:last-child {
  margin-bottom: 0;
}

.upload-title {
  margin-bottom: 12px;
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

.action-buttons {
  text-align: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e6ebf5;
}

.action-buttons .el-button {
  margin: 0 12px;
  min-width: 120px;
  height: 40px;
  font-size: 16px;
}

/* 强制统一图片尺寸 - 最高优先级 */
:deep(.rectangle-upload .el-upload-list--picture-card) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

:deep(.rectangle-upload .el-upload-list--picture-card .el-upload-list__item) {
  width: 200px !important;
  height: 150px !important;
  margin: 0 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  background-color: #fafafa !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

:deep(.rectangle-upload .el-upload--picture-card) {
  width: 200px !important;
  height: 150px !important;
  line-height: 150px !important;
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #fafafa !important;
  transition: all 0.3s !important;
  flex-shrink: 0 !important;
}

:deep(.rectangle-upload .el-upload--picture-card:hover) {
  border-color: #409eff !important;
  background-color: #f0f7ff !important;
}

:deep(
    .rectangle-upload
      .el-upload-list--picture-card
      .el-upload-list__item-thumbnail
  ) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* 确保删除按钮样式正确 */
:deep(
    .rectangle-upload
      .el-upload-list--picture-card
      .el-upload-list__item-actions
  ) {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  cursor: default !important;
  text-align: center !important;
  color: #fff !important;
  opacity: 0 !important;
  font-size: 20px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  transition: opacity 0.3s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:deep(
    .rectangle-upload
      .el-upload-list--picture-card
      .el-upload-list__item-actions:hover
  ) {
  opacity: 1 !important;
}

:deep(
    .rectangle-upload
      .el-upload-list--picture-card
      .el-upload-list__item-actions
      span
  ) {
  display: inline-block !important;
  cursor: pointer !important;
  margin: 0 8px !important;
}

/* 表单元素样式优化 */
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #e6ebf5;
  background: #fafbfc;
}

:deep(.el-card__body) {
  padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .device-edit-container {
    padding: 12px;
  }

  .device-form {
    padding: 16px;
  }

  .page-header {
    padding: 12px 16px;
  }

  :deep(.el-card__body) {
    padding: 16px;
  }

  /* 移动端图片尺寸调整 */
  :deep(.rectangle-upload .el-upload-list--picture-card .el-upload-list__item) {
    width: 150px !important;
    height: 112px !important;
  }

  :deep(.rectangle-upload .el-upload--picture-card) {
    width: 150px !important;
    height: 112px !important;
    line-height: 112px !important;
  }

  :deep(.rectangle-upload .el-upload-list--picture-card) {
    gap: 8px !important;
  }

  .action-buttons .el-button {
    margin: 0 8px;
    min-width: 100px;
    height: 36px;
    font-size: 14px;
  }
}

/* 平板适配 */
@media (max-width: 1024px) and (min-width: 769px) {
  .device-edit-container {
    padding: 16px;
  }

  .device-form {
    padding: 20px;
  }
}

/* 大屏适配 */
@media (min-width: 1200px) {
  .device-edit-container {
    max-width: 1400px;
  }
}

/* 加载状态 */
:deep(.el-upload-list__item) {
  transition: all 0.3s;
}

:deep(.el-upload-list__item.is-ready) {
  opacity: 0;
}

:deep(.el-upload-list__item.is-success) {
  opacity: 1;
}

/* 错误状态 */
:deep(.el-upload-list__item.is-error) {
  border-color: #f56c6c !important;
}

/* 上传提示文字 */
:deep(.el-upload__tip) {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

/* 视频预览区域样式 */
.video-preview-container {
  margin-top: 20px;
}

.video-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fafafa;
}

.video-thumbnail {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  margin-right: 16px;
}

.video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-thumbnail:hover .video-play-overlay {
  opacity: 1;
}

.video-info {
  flex: 1;
}

.video-name {
  font-weight: 500;
  margin-bottom: 8px;
  color: #303133;
}

.video-actions {
  display: flex;
  gap: 12px;
}

/* 视频上传区域样式 */
:deep(.el-upload-list--text) {
  margin-top: 10px;
}

:deep(.el-upload-list--text .el-upload-list__item) {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

:deep(.el-upload-list--text .el-upload-list__item-name) {
  display: flex;
  align-items: center;
}

:deep(.el-upload-list--text .el-icon-document) {
  margin-right: 8px;
  color: #409eff;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .video-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .video-thumbnail {
    width: 100%;
    height: 150px;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .video-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* 添加上传表单项的样式 */
.upload-form-item {
  margin-bottom: 0;
}

:deep(.upload-form-item .el-form-item__label) {
  display: none;
}

:deep(.upload-form-item .el-form-item__content) {
  line-height: normal;
}

:deep(.upload-form-item .el-form-item__error) {
  margin-top: 8px;
}

/* 图片错误提示样式 */
.image-error-tip {
  margin-top: 8px;
  padding: 4px 0;
}

/* 确保上传区域样式正常 */
.upload-section {
  margin-bottom: 20px;
}

.upload-section:last-child {
  margin-bottom: 0;
}

.upload-title {
  margin-bottom: 12px;
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

.required {
  color: #f56c6c;
  margin-right: 4px;
}

.tip {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
  margin-left: 8px;
}
</style>